/**
* 首页
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ScrollView, ImageBackground, RefreshControl } from "react-native";
import { connect } from 'react-redux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { ProgressView } from '../custom/index';
import { Actions } from 'react-native-router-flux';
import Echarts from 'native-echarts';
const ImageWidth = (Dimens.DeviceWidth - 60) / 2
const ImageHeight = (Dimens.DeviceWidth - 60) / 2 * 0.8

class TeamTabView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            showTipMessage: false
        }
        this.option1 = {
            legend: { 
                data: ['直营', '团队'], 
                right: '20', 
                textStyle: { fontSize: 15 } 
            },
            tooltip: { trigger: 'axis' },
            xAxis: { 
                type: 'category', 
                data: [], 
                axisTick: { "show": false }, 
                splitLine: { "show": false }, 
                axisLine: { "show": true, lineStyle: { color: "#999999" } } ,
            },
            yAxis: {
                show: true, 
                axisTick: { "show": false }, 
                splitLine: { "show": true }, 
                axisLine: { "show": true, 
                lineStyle: { color: "#999999" } }, 
                axisLabel: {
                    formatter: function (value, index) {
                        if (value >= 10000 && value < 10000000) {
                            value = parseFloat(value * 0.0001).toFixed(1) + "万";
                        } else if (value >= 10000000) {
                            value = parseFloat(value * 0.0000001).toFixed(1) + "千万";
                        }
                        return value
                    }
                }, 
                scale: true,
            },
            grid: {
                left: 15,
                containLabel: true
            },
            series: [{
                name: '直营', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6, itemStyle: {
                    normal: { color: "#378EFB", label: { show: false } }
                }
            }, {
                name: '团队', type: 'line', data: [],
                smooth: true, symbol: 'circle', symbolSize: 6, itemStyle: { normal: { color: '#FC2222', label: { show: false } } }
            }]
        }
        this.option2 = {
            legend: { data: ['直营', '团队'], right: '20', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: [], axisTick: { "show": false }, splitLine: { "show": false }, axisLine: { "show": true, lineStyle: { color: "#999999" } } },
            yAxis: {
                show: true, axisTick: { "show": false }, splitLine: { "show": true }, axisLine: { "show": true, lineStyle: { color: "#999999" } }, axisLabel: {
                    formatter: function (value, index) {
                        if (value >= 10000 && value < 10000000) {
                            value = parseFloat(value * 0.0001).toFixed(1) + "万";
                        } else if (value >= 10000000) {
                            value = parseFloat(value * 0.0000001).toFixed(1) + "千万";
                        }
                        return value
                    }
                }, scale: true
            },
            grid: {
                left: 15,
                containLabel: true
            },
            series: [{
                name: '直营', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6, itemStyle: {
                    normal: { color: "#378EFB", label: { show: false } }
                }
            },
            {
                name: '团队', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6,
                itemStyle: { normal: { color: '#FC2222', label: { show: false } } }
            },]
        }
        this.option3 = {
            legend: { data: ['直营', '团队'], right: '20', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: [], axisTick: { "show": false }, splitLine: { "show": false }, axisLine: { "show": true, lineStyle: { color: "#999999" } } },
            yAxis: {
                show: true, axisTick: { "show": false }, splitLine: { "show": true }, axisLine: { "show": true, lineStyle: { color: "#999999" } }, axisLabel: {
                    formatter: function (value, index) {
                        if (value >= 10000 && value < 10000000) {
                            value = parseFloat(value * 0.0001).toFixed(1) + "万";
                        } else if (value >= 10000000) {
                            value = parseFloat(value * 0.0000001).toFixed(1) + "千万";
                        }
                        return value
                    }
                }, scale: true
            },
            grid: {
                left: 15,
                containLabel: true
            },
            series: [{
                name: '直营', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6, itemStyle: {
                    normal: { color: "#378EFB", label: { show: false } }
                }
            },
            {
                name: '团队', type: 'line', data: [], smooth: true, symbol: 'circle', symbolSize: 6,
                itemStyle: { normal: { color: '#FC2222', label: { show: false } } }
            },
            ]
        }
        this.userInfo = props.userInfo
    }

    componentDidMount() {
        this.getHomeData()
        this.getUserInfo()
    }
    getUserInfo() {
        this.props.dispatch(create_service(Contract.POST_USER_INFO, { token: this.userInfo.token })).then((res) => {
            if (res) {
                this.props.dispatch({ type: 'SAVE_USER_INFO', data: { data: { user: res, token: this.userInfo.token } } })
            }
        })
    }
    componentWillReceiveProps(nextProps) {
        this.userInfo = nextProps.userInfo
    }
    getHomeData() {
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_INDEX, { token: this.userInfo.token })).then((res) => {
            if (res) {
                for (let key in res.trade.direct_daily) {
                    if (res.trade.direct_daily.hasOwnProperty(key)) {
                        this.option1.xAxis.data.push(key)
                        this.option1.series[0].data.push(parseFloat(res.trade.direct_daily[key]))
                        this.option1.series[1].data.push(parseFloat(res.trade.team_daily[key]))
                    }
                }
                for (let key in res.user.direct_daily) {
                    if (res.user.direct_daily.hasOwnProperty(key)) {
                        this.option2.xAxis.data.push(key)
                        this.option2.series[0].data.push(parseFloat(res.user.direct_daily[key]))
                        this.option2.series[1].data.push(parseFloat(res.user.team_daily[key]))
                    }
                }
                for (let key in res.activate.direct_daily) {
                    if (res.activate.direct_daily.hasOwnProperty(key)) {
                        this.option3.xAxis.data.push(key)
                        this.option3.series[0].data.push(parseFloat(res.activate.direct_daily[key]))
                        this.option3.series[1].data.push(parseFloat(res.activate.team_daily[key]))
                    }
                }
                this.homeDetail = res
            }
            this.setState({ loading: false })
        })
    }
    componentWillUnmount() {

    }
    renderHeader() {
        return (
            <View style={{ backgroundColor: Colors.bg_color }}>
                <ImageBackground style={styles.header} source={ImageRes.team_header}>
                    <View style={{ flex: 1, flexDirection: 'row', paddingBottom: 20 }}>
                        <View style={{ flex: 1, justifyContent: 'center', marginTop: 30, alignSelf: 'flex-end' }}>
                            <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center' }} activeOpacity={0.8} onPress={() => {
                                Actions.teamWeeklyTradeView({ users_id: this.userInfo.user.id })
                            }}>
                                <Text style={{ fontSize: 22, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                                    {this.homeDetail && this.homeDetail.repayment_amount}
                                </Text>
                                <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 10 }}>总交易额(万元)</Text>
                            </TouchableOpacity>   
                        </View>
                        <View style={{ flex: 1, justifyContent: 'center', marginTop: 30, alignSelf: 'flex-end' }}>
                            <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center' }} activeOpacity={0.8} onPress={() => {
                                    Actions.teamManagerListView({ users_id: this.userInfo.user.id})
                                }}>
                                <Text style={{ fontSize: 22, color: "#ffffff", alignSelf: 'center', fontWeight: 'bold' }}>
                                    {this.homeDetail && this.homeDetail.team_user}
                                </Text>
                                <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 10 }}>总用户量(人)</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <Image source={ImageRes.team_header_bottom} style={{ width: Dimens.DeviceWidth, height: Dimens.DeviceWidth * 0.09, resizeMode: 'contain' }} />
                </ImageBackground>
                {this.state.showTipMessage && <View style={{ marginHorizontal: 20, borderBottomLeftRadius: 5, borderBottomRightRadius: 5, padding: 8, flexDirection: 'row', backgroundColor: "#ffffff" }}>
                    <Image source={ImageRes.team_notify} style={{ width: 22, height: 20 }}></Image>
                    <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center', marginLeft: 10 }}>
                        您的费率从
                        <Text style={{ color: '#FC2222' }}>万60</Text>
                        修改至
                        <Text style={{ color: '#FC2222' }}>万70</Text>
                    </Text>
                </View>}
                <View style={{ flexDirection: 'row', justifyContent: 'center', backgroundColor: "#ffffff", marginTop: 10 }}>
                    <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center' }} activeOpacity={0.8} onPress={() => {
                        Actions.teamManagerListView({users_id: this.userInfo.user.id})
                    }}>
                        <Image style={{ width: ImageWidth, height: ImageHeight, justifyContent: 'center', flexDirection: 'row' }} source={ImageRes.team_manager_bg}>
                        </Image>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center', marginLeft: 15 }} activeOpacity={0.8} onPress={() => {
                        Actions.teamRankListView()
                    }}>
                        <Image style={{ width: ImageWidth, height: ImageHeight, justifyContent: 'center', flexDirection: 'row' }} source={ImageRes.team_rank_bg}>
                        </Image>
                    </TouchableOpacity>
                    {/* <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center', marginLeft: 15 }} activeOpacity={0.8} onPress={() => {
                        Actions.teamBalanceView()
                    }}>
                        <Image style={{ width: ImageWidth, height: ImageHeight, justifyContent: 'center', flexDirection: 'row' }} source={ImageRes.team_price_bg}>
                        </Image>
                    </TouchableOpacity> */}
                </View>
            </View>
        )
    }
    renderShadowView(title, value) {
        return (
            <View style={{ width: (Dimens.DeviceWidth - 60) / 3, height: 0.75 * (Dimens.DeviceWidth - 60) / 3, marginLeft: 15 }}>
                <View style={{ backgroundColor: '#378EFB', width: (Dimens.DeviceWidth - 60) / 3, borderTopLeftRadius: 5, borderTopRightRadius: 5, alignSelf: 'center', height: 25, justifyContent: 'center' }}>
                    <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>{title}</Text>
                </View>
                <View style={{ flex: 1, justifyContent: 'center', borderWidth: 1, borderColor: '#FAFAFA' }}>
                    <Text style={{ fontSize: 13, color: "#333333", alignSelf: 'center', fontWeight: 'bold' }}>{value}</Text>
                </View>
            </View>
        )
    }
    renderTrade(tradeData) {
        return (
            <View style={{ backgroundColor: '#ffffff', marginTop: 10 }}>
                <View style={{ flexDirection: 'row', padding: 15, justifyContent: 'space-between' }}>
                    <Text style={{ fontSize: 15, color: "#333333", fontWeight: 'bold' }}>近七天交易额</Text>
                    <TouchableOpacity style={{ justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.8} onPress={() => {
                        Actions.teamWeeklyTradeView({ users_id: this.userInfo.user.id })
                    }}>
                        <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center' }}>更多</Text>
                        <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 10 }} />
                    </TouchableOpacity>
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                <View style={{ flexDirection: 'row', marginTop: 15 }}>
                    {this.renderShadowView('直营', tradeData.direct)}
                    {this.renderShadowView('团队', tradeData.team)}
                    {this.renderShadowView('总计', tradeData.total)}
                </View>
                <View style={{ marginTop: 15 }}>
                    <Echarts option={this.option1} height={300} />
                </View>
            </View>
        )
    }
    renderTeamData(userData) {
        return (
            <View style={{ backgroundColor: '#ffffff', marginTop: 10 }}>
                <View style={{ flexDirection: 'row', padding: 15, justifyContent: 'space-between' }}>
                    <Text style={{ fontSize: 15, color: "#333333", fontWeight: 'bold' }}>近七天团队增长数据</Text>
                    <TouchableOpacity style={{ justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.8} onPress={() => {
                        Actions.teamWeeklyTeamDataView({ users_id: this.userInfo.user.id })
                    }}>
                        <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center' }}>更多</Text>
                        <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 10 }} />
                    </TouchableOpacity>
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                <View style={{ flexDirection: 'row', marginTop: 15 }}>
                    {this.renderShadowView('直营', userData.direct + '人')}
                    {this.renderShadowView('团队', userData.team + '人')}
                    {this.renderShadowView('总计', userData.total + '人')}
                </View>
                <View style={{ marginTop: 15 }}>
                    <Echarts option={this.option2} height={300} />
                </View>
            </View>
        )
    }
    renderActiveData(activeData) {
        return (
            <View style={{ backgroundColor: '#ffffff', marginTop: 10 }}>
                <View style={{ flexDirection: 'row', padding: 15, justifyContent: 'space-between' }}>
                    <Text style={{ fontSize: 15, color: "#333333", fontWeight: 'bold' }}>近七天激活增长数据</Text>
                    <TouchableOpacity style={{ justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.8} onPress={() => {
                        Actions.teamWeeklyActiveView({ users_id: this.userInfo.user.id })
                    }}>
                        <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center' }}>更多</Text>
                        <Image source={ImageRes.team_right_arrow} style={{ width: 10, height: 16, alignSelf: 'center', marginLeft: 10 }} />
                    </TouchableOpacity>
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 1 }}></View>
                <View style={{ flexDirection: 'row', marginTop: 15 }}>
                    {this.renderShadowView('直营', activeData.direct + '人')}
                    {this.renderShadowView('团队', activeData.team + '人')}
                    {this.renderShadowView('总计', activeData.total + '人')}
                </View>
                <View style={{ marginTop: 15 }}>
                    <Echarts option={this.option3} height={300} />
                </View>
                <View style={{ backgroundColor: Colors.bg_color, height: 20 }}></View>
            </View>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                {/* {Dimens.isAndroid && <StatusBar hidden={false} backgroundColor={'rgba(55, 142, 251, 1)'} />} */}
                <ScrollView showsVerticalScrollIndicator={false}
                    style={{ backgroundColor: Colors.bg_color }}
                    refreshControl={<RefreshControl
                        refreshing={false}
                        onRefresh={() => {

                        }}
                        tintColor='#999999'
                        title='下拉刷新中...'
                        titleColor='#333333'
                    />}>
                    {this.renderHeader()}
                    {this.homeDetail && this.renderTrade(this.homeDetail.trade)}
                    {this.homeDetail && this.renderTeamData(this.homeDetail.user)}
                    {this.homeDetail && this.renderActiveData(this.homeDetail.activate)}
                </ScrollView>
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.bg_color,
        paddingBottom: Dimens.isIPhoneX ? 15 : 0,
        flex: 1
    },
    header: {
        width: Dimens.DeviceWidth,
        height: Dimens.DeviceWidth * 0.55
    }
});
function mapStateToProps(state) {
    return {
        userInfo: state.auth.userInfo
    }
}
const ExportView = connect(mapStateToProps)(TeamTabView);
module.exports.TeamTabView = ExportView
